
<template>
  <div class="parent-card" v-infinite-scroll="load" :infinite-scroll-distance="10" :infinite-scroll-immediate="false">
    <el-dialog v-model="show" width="70%" :show-close="false" top="5vh" :append-to-body="true"
      :close-on-click-modal="false" class="dialog" style="border-radius: 16px;">
      <div class="title">Set Host Profile</div>
      <div class="sels">
        <div class="img" :style="showBg(imgs.avatar)">
          <draggable :list="avatars" :group="{ name: 'image', pull: false }" item-key="index" class="dragged-container">
            <template #item="{ element }">
              <div>
                <el-image :src="element.photo" class="top-img" :fit="fit" />
              </div>
            </template>
          </draggable>
          <div class="title">Avatar</div>
        </div>
        <div class="img" :style="showBg(imgs.cover)">
          <draggable :list="covers" :group="{ name: 'image', pull: false }" item-key="index" class="dragged-container">
            <template #item="{ element }">
              <div>
                <el-image :src="element.photo" class="top-img" :fit="fit" />
              </div>
            </template>
          </draggable>
          <div class="title">Cover</div>
        </div>
      </div>
      <div class='album'>
        <div class="title">
          Album
        </div>
        <div class="content" ref="albumScroll" @scroll="handleAlbumScroll">
          <draggable class="dragArea list-group story-content" :list="albumList"
            :group="{ name: 'image', pull: 'clone', put: true }" :clone="clone" @end="onImageEnd" item-key="index">
            <template #item="{ element }">
              <div>
                <el-image :src="element.photo" lazy class="img" style="border-radius: 16px;"
                  @click="preview(element.photo)" :fit="fit" />
              </div>
            </template>
          </draggable>
        </div>
      </div>
      <div class="dialog-btns">
        <div class="cancel" @click="show = false">Cancel</div>
        <div class="ok" @click="submit">Ok</div>
      </div>
    </el-dialog>
    <el-image-viewer hide-on-click-modal @close="() => { showImage = false }" v-if="showImage"
      :url-list="[previewImage]" />
    <Modal v-model:show-modal="showModal">
      <video width="800" height="360" controls autoplay loop>
        <source :src="videoUrl" type="video/mp4" />
      </video>
    </Modal>
    <div class="right" v-show="hostAuditList.length">
      <div class="album">
        <div class="album-cards">
          <div class="card" v-for="item, index in hostAuditList" :key="index">
            <div class="album-card" :style="{ 'background-image': `url('${getImg(item.content)}')` }"
               @click="preview(getImg(item.content))">
              <div class="btns">
                <el-button class="reject"
                  @click.stop="reject(item.id, item.user_id, index, item.book_id)">Reject</el-button>
                <el-button class="accept"
                  @click.stop="accept(item.id, item.user_id, index, item.book_id)">Accept</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template class="empty-tip" v-show="!hostAuditList.length">
      <div>No any data</div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import auth from '@/vendors/auth/auth'
import debounce from 'lodash/debounce'
import { ElImageViewer } from 'element-plus';
import Modal from '@/components/common/Modal.vue'
import { ref, watch } from 'vue'
import draggable from "vuedraggable";
import { GetHostAlbum } from '@/vendors/hostAlbum/hostAlbum'
import { videoForm } from '@/vendors/hostAlbum/form';
const showImage = ref(false)
const showModal = ref(false)
const fit = ref('cover')
const previewImage = ref('')
const videoUrl = ref('')
import { GetCertification } from '@/vendors/certification/certification'
import { ElLoading } from 'element-plus'
import { loadingService,getImg } from '@/utils/utils'
import useSetting from '@/vendors/store/setting'
const {
  hostAuditTotal,
  hostAuditList,
  hostAuditAlbumStory,
  videosTotal,
  videosList,
  getVideoByHostId,
  albumTotal,
  albumList,
  getAlbumByHostId,
  setCover,
  setVideoBeforeCall,
  setAvatar,
  getImgVideo,
  imgs,
  albumPage,
  videosPage,
  hostAuditPage,
  hostAuditSize
} = GetHostAlbum()
const {
  updateAudit,
} = GetCertification()
hostAuditAlbumStory()

const setting = useSetting()

const bg = new URL(`/src/assets/images/avatar.png`, import.meta.url).href

const showBg = (img: string) => {
  const background = img ? img : bg
  return {
    background: `url('${background}')`,
    'background-size': '100%,100%',
    'background-repeat': 'no-repeat'
  }
}
const preview = (img: string) => {
  showImage.value = true
  previewImage.value = img
}
const covers = ref(<any>[])
const avatars = ref(<any>[])
const videos = ref(<any>[])
const albumScroll = ref(null);
const videosScroll = ref(null);
// image video
const onImageEnd = (event: any) => {
  // 如何判断是推到了哪个呢？
  // 不用判断 直接取最新的
  covers.value.length > 1 && covers.value.splice(0, covers.value.length - 1)
  avatars.value.length > 1 && avatars.value.splice(1, avatars.value.length)

}


const clone = (obj: videoForm) => {
  return obj
}

const load = () => {
  if (hostAuditList.value.length == hostAuditTotal.value) return
  hostAuditAlbumStory()
}

const workSheetId = ref(0)

const show = ref(false)
const accept = (id: number, player_id: number, index: number, work_sheet_id: number) => {
  const loading = ElLoading.service(loadingService)
  workSheetId.value = work_sheet_id
  updateAudit(id, 2, player_id, (count: number) => {
    loading.close()
    showDialog(player_id)
    // 刷新列表
    hostAuditList.value.splice(index, 1)
    hostAuditAlbumStory()
  })
}
const reject = (id: number, player_id: number, index: number, work_sheet_id: number) => {
  const loading = ElLoading.service(loadingService)
  workSheetId.value = work_sheet_id
  updateAudit(id, 3, player_id, (count: number) => {
    loading.close()
    showDialog(player_id)
    hostAuditList.value.splice(index, 1)
    hostAuditAlbumStory()
  })
}

const showDialog = (player_id: number) => {
  // 减少数量

  setting.setCaAlbumVideoCount(setting.count[1].num - 1)
  if (auth.editHostProfile()) {
    // 有编辑权限才展示
    show.value = true
    // 初始化数据
    albumPage.value = 1
    videosPage.value = 1
    videosList.value.splice(0, videosList.value.length)
    albumList.value.splice(0, albumList.value.length)
    getImgVideo(player_id)
    getAlbumByHostId(player_id)
    getVideoByHostId(player_id)
  }
}

// 提交
const submit = () => {
  if (avatars.value.length) {
    setAvatar(avatars.value[0].id, workSheetId.value)
  }
  if (covers.value.length) {
    setCover(covers.value[0].id, workSheetId.value)
  }
  if (videos.value.length) {
    setVideoBeforeCall(videos.value[0].id, workSheetId.value)
  }
  show.value = false
}
const handleAlbumScroll = debounce(() => {
  if (isAtBottom(albumScroll.value)) {
    // 触底逻辑，可以加载更多数据或执行其他操作
    if (albumList.value.length == albumTotal.value) return
    getAlbumByHostId(imgs.value.player_id)
  }
}, 300)

const handleVideosScroll = debounce(() => {
  if (isAtBottom(videosScroll.value)) {
    // 触底逻辑，可以加载更多数据或执行其他操作
    if (videosList.value.length == videosTotal.value) return
    getVideoByHostId(imgs.value.player_id)
  }
}, 300)

const isAtBottom = (element: any) => {
  const scrollLeft = element.scrollLeft;
  const scrollWidth = element.scrollWidth;
  const clientWidth = element.clientWidth;
  return scrollLeft + clientWidth + 10 >= scrollWidth; //10px阈值
};
// watch(() => setting.refreshCount, () => {
//   if (setting.refreshCount) {
//     // 需要刷新当前页
//     const len = hostAuditList.value.length
//     hostAuditTotal.value = -1
//     const flag = len !=0 && len % hostAuditSize.value == 0  // 列表是整10倍数
//     let index = 0
//     let count = 0
//     if (!flag) {
//       // 非整10倍数
//       hostAuditPage.value -= 1
//       index = Math.floor(len / hostAuditSize.value) * hostAuditSize.value
//       count = len - index
//     }
//     hostAuditAlbumStory(() => {
//       setting.setRefreshCount(!setting.refreshCount)
//       count && hostAuditList.value.splice(index, count)
//     })
//   }
// })
</script>
<style scoped lang="scss">
.play {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(white, .5);
  display: flex;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;

  img {
    width: 37px;
    height: 37px;
    margin: 0 auto;
  }
}

.parent-card {
  border-radius: 16px;
  background: white;
  display: flex;
  font-size: 16px;
  overflow-y: scroll;
  box-shadow: -3px 0 4px 1px #0000001A, 3px 0 4px 1px #0000001A;

  .right {
    max-height: calc(100vh - 330px);

  }
}

.right {
  margin: 24px 0;

}

.album-card {
  width: 250px;
  height: 368px;
  border-radius: 16px;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  /* 调整这里 */
}


.album-card:nth-child(2n+1) {
  margin-right: 16px;
}

.album-cards {
  display: flex;
  flex-wrap: wrap;
}

.btns {
  width: 250px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
}


.reject,
.accept {
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0em;
  border: 0;
  width: 102px;
  height: 48px;
  border-radius: 12px;
}

.reject {
  color: rgba(250, 74, 130, 1);
}

.accept {
  color: white;
  background: rgba(0, 132, 255, 1);
}

.card {
  display: flex;
  background: rgba(250, 74, 130, 0.05);
  border-radius: 16px;
  padding: 16px;
  margin-left: 48px;
  margin-bottom: 50px;

  .check {
    border-radius: 8px;
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 40px;
    color: white;
    background: rgba(0, 0, 0, .2);
  }
}

input[type=checkbox] {
  width: 24px;
  height: 24px;
  display: inline-block;
  text-align: center;
  line-height: 24px;
  vertical-align: text-bottom;
  position: relative;
  border-radius: 8px;
  outline: none;
  -webkit-appearance: none;
  color: #fff;
  margin-right: 8px;
}

input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #999999;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  color: #fff;
  margin-top: 5px;
}


input[type=checkbox]:checked::before {
  content: "\2713";
  background: rgba(250, 74, 130, 1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
  font-size: 10px;
  border-radius: 8px;
}

input[type=checkbox]:checked+label {
  color: rgba(250, 74, 130, 1);
}

.dialog {
  border-radius: 16px;

  .dialog-btns {
    width: 648px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 36px;

    .cancel,
    .ok {
      width: 300px;
      line-height: 48px;
      border-radius: 12px;
      border: 1px;
      text-align: center;
      font-size: 20px;
    }

    .cancel {
      cursor: pointer;
      color: rgba(250, 74, 130, 1);
      border: 1px solid rgba(0, 0, 0, 0.2)
    }

    .ok {
      cursor: pointer;
      color: white;
      background: rgba(0, 132, 255, 1);

    }

  }

  .title {
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0em;
    text-align: center;
    // margin-bottom: 50px;
  }

  .sels {
    display: flex;
    justify-content: space-between;
    margin-top: 36px;
    width: 410px;
    margin: 0px auto;
    margin-top: 50px;

    .dragged-container {
      width: 120px;
      height: 160px;
      overflow: hidden;
    }

    .img {
      width: 120px;
      height: 160px;
      border-radius: 16px;
      position: relative;
      cursor: pointer;
      background-size: cover;
      background-position: center;

      .title {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 100;
        text-align: center;
        font-size: 16px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        background: rgba(0, 132, 255, 1);
        color: white;
        line-height: 24px;
      }
    }
  }

  .album {
    display: flex;
    height: 170px;
    position: relative;
    margin-top: 23px;

    .title {
      transform: translate(-80%) rotate(90deg);
      position: relative;
      bottom: 0.5em;
    }

    .story {
      transform: translate(-98%) rotate(90deg);
      margin-right: 15px;
    }

    .content {
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
      height: 100%;
      overflow-y: hidden;

      .img {
        width: 120px;
        height: 160px;
        margin-right: 16px;
      }

      .img:nth-last-child {
        margin-right: 0;
      }
    }
  }
}

::-webkit-scrollbar {
  height: 13px;
}

.play-contain {
  position: relative;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(white, .5);
  display: flex;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;

  img {
    width: 37px;
    height: 37px;
    margin: 0 auto;
  }
}

.story-content {
  display: flex;
}

.top-img {
  width: 120px !important;
  height: 160px !important;
  border-radius: 16px !important;
  cursor: pointer;
}
</style>